<template>
  <div class="dialog-container">
    <el-dialog
      v-model="dialogVisible"
      :before-close="handleClose"
      :title="title"
      width="40%"
    >
      <div class="table">
        <div class="condition">
          <span class="color_494949 ft12 pr5">商品编码：</span>
          <ElInput
            v-model="proCode"
            class="w164 mr14"
            placeholder="请输入商品编码"
          />
          <ElButton class="settingBtn" type="primary" @click="search">
            查询
          </ElButton>
        </div>
        <ElTable
          ref="multipleTableRef"
          v-loading="loading"
          :border="true"
          :data="tableData"
          highlight-current-row
          @row-click="singleElection"
        >
          <ElTableColumn width="55">
            <template #default="{ row }">
              <el-radio v-model="radioModel" :label="row.Code">&nbsp;</el-radio>
            </template>
          </ElTableColumn>
          <ElTableColumn label="商品编码" prop="Code" width="auto" />
          <ElTableColumn label="商品名称" prop="Name" width="auto" />
        </ElTable>
        <div v-if="total > 0" class="pagination">
          <ElPagination
            background
            :current-page="searchInfo.pageNo"
            :layout="layout"
            :page-size="searchInfo.pageSize"
            :total="total"
            @current-change="handleCurrentChange"
            @size-change="handleSizeChange"
          />
        </div>
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="handleClose">取消</el-button>
          <el-button type="primary" @click="confirm">确定</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script lang="ts" setup>
  import { ref } from 'vue'
  import { ElTable } from 'element-plus'
  import { getProductsData } from '@/api/mupro'
  const props = defineProps({
    visible: {
      type: Boolean,
      default: false,
    },
    selectedItem: {
      type: Object,
      default() {
        return []
      },
    },
    title: {
      type: String,
      default: '添加商品',
    },
  })
  const dialogVisible = ref(props.visible)
  const proCode = ref('')
  const radioModel: any = ref('')
  watch(
    () => props.visible,
    () => {
      dialogVisible.value = props.visible
      if (props.visible) {
        console.log(props.selectedItem)
        radioModel.value = props.selectedItem?.PCode
      }
    },
    { immediate: true }
  )
  // 商品列表
  const searchInfo = reactive({
    pageNo: 1,
    pageSize: 20,
    tableName: '',
    sort: '',
    order: '',
    wheres: `[{"name":"Code","value":${
      proCode.value || ''
    },"displayType":"text"}]`,
    export: false,
    value: '',
  })
  const loading = ref(false)
  const layout = ref('total, sizes, prev, pager, next, jumper')
  const tableData = ref([])
  const total = ref(0)
  // 获取表格数据
  const gettableData = async () => {
    loading.value = true
    const { data } = await getProductsData(searchInfo)
    loading.value = false
    tableData.value = data?.rows || []
    total.value = data?.total || 0
    console.log(radioModel.value)
  }
  gettableData()
  //分页条数切换
  const handleSizeChange = (val: any) => {
    searchInfo.pageSize = val
    gettableData()
  }
  //分页切换
  const handleCurrentChange = (val: any) => {
    searchInfo.pageNo = val
    gettableData()
  }
  // 搜索
  const search = () => {
    searchInfo.pageNo = 1
    if (proCode.value.trim() !== '') {
      const arr: any = []
      arr.push({ name: 'Code', value: proCode.value, displayType: 'like' })
      searchInfo.wheres = JSON.stringify(arr)
    } else {
      searchInfo.wheres = `[{"name":"Code","value":${
        proCode.value || ''
      },"displayType":"text"}]`
    }
    gettableData()
  }
  // const handleSelect = (selection: any, row: any) => {
  //   // console.log(selection)
  //   console.log(row)
  //   console.log('3', multipleSelection.value)
  //   let itemIndex = -1
  //   multipleSelection.value.map((item: any, index: number) => {
  //     if (item.Code === row.Code) {
  //       itemIndex = index
  //     }
  //   })
  //   if (itemIndex === -1) {
  //     multipleSelection.value.push({
  //       Code: row.Code,
  //       Name: row.Name,
  //     })
  //   } else {
  //     multipleSelection.value.splice(itemIndex, 1)
  //   }
  //   console.log(multipleSelection.value)
  // }
  const selectedItem: any = ref({})
  const singleElection = (row: any) => {
    radioModel.value = row.Code
    selectedItem.value = row
  }
  const emit = defineEmits(['close', 'confirm'])
  const handleClose = () => {
    dialogVisible.value = false
    emit('close', dialogVisible.value)
  }
  const confirm = () => {
    console.log(selectedItem.value)
    emit('confirm', selectedItem.value)
    // dialogVisible.value = false
  }
</script>

<style lang="scss" scoped>
  .table {
    .condition {
      margin-bottom: 20px;
      .color_494949 {
        color: #494949;
      }

      .w164 {
        width: 164px;
      }

      .mb20 {
        margin-bottom: 20px;
      }

      .mr14 {
        margin-right: 14px;
      }
    }
  }
  .tag {
    font-size: 14px;
  }
</style>
